<template>
  <view class="news-wrap" @click="bindClick">
    <view class="news-item">
      <!-- 上下多图无图模式 -->
      <view v-if="data.type == '0' || data.type == '1'" class="item-vertical">
        <view class="top">
          <view class="title ellipsis-2">{{ data.title }}</view>
        </view>
        <view class="middle">
          <image
            v-for="(item, index) in data.imgs"
            :key="index"
            :src="item"
            mode="aspectFill"
            class="img"
          ></image> </view
        ><view class="bottom"
          ><text class="r" :style="{ color: tagColor }" v-if="data.tag">{{
            data.tag
          }}</text
          ><text class="r" v-if="data.author">{{ data.author }}</text
          ><text v-if="data.comment">{{ data.comment }}评论</text></view
        >
      </view>
      <!-- 左右单图模式 -->
      <view v-if="data.type == '2'" class="item-horizontal">
        <view class="left">
          <view class="title ellipsis-2">{{ data.title }}</view>
          <view class="desc"
            ><text class="r" :style="{ color: tagColor }" v-if="data.tag">{{
              data.tag
            }}</text
            ><text class="r" v-if="data.author">{{ data.author }}</text
            ><text v-if="data.comment">{{ data.comment }}评论</text></view
          >
        </view>
        <view class="right" v-if="data.imgs.length >= 1">
          <image :src="data.imgs[0]" mode="aspectFill" class="img"></image>
        </view>
      </view>
      <!-- 上下大图、视频模式 -->
      <view
        v-if="data.type == '3' || data.type == '4'"
        class="item-vertical-big"
      >
        <view class="top">
          <view class="title ellipsis-2">{{ data.title }}</view>
        </view>
        <view class="middle" v-if="data.imgs.length >= 1">
          <image :src="data.imgs[0]" mode="aspectFill" class="img"></image>
          <image src="/static/icon/play.png" class="play"></image>
          <view class="info"
            ><text class="r" v-if="data.playCount"
              >{{ data.playCount }}次播放</text
            ><text v-if="data.time">{{ data.time }}</text></view
          ></view
        ><view class="bottom"
          ><text class="r" :style="{ color: tagColor }" v-if="data.tag">{{
            data.tag
          }}</text
          ><text class="r" v-if="data.author">{{ data.author }}</text
          ><text v-if="data.comment">{{ data.comment }}评论</text></view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "xboot-news-item",
  props: {
    data: {
      type: Object,
      default: function (e) {
        return {};
      },
    },
  },
  computed: {
    tagColor() {
      if (this.data.tagType < 0 || this.data.tagType > 3) {
        return "";
      }
      // 0-red 1-warning 2-success 3-primary
      return ["#ed4014", "#ff7900", "#19be6b", "#198fff"][this.data.tagType];
    },
  },
  methods: {
    bindClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
.news-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #fff;
  &:active {
    background-color: $xboot-bg-color-hover;
  }
  .news-item {
    width: calc(100% - 30px);
    padding: 10px 0;
    border-bottom: 1rpx solid #eaeef1;
    .item-horizontal {
      min-height: 82rpx;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 8px;
        .title {
          color: $xboot-text-color;
          font-size: 18px;
          line-height: 26px;
          margin-bottom: 10px;
        }
        .desc {
          font-size: 13px;
          color: $xboot-text-color-grey;
          .r {
            margin-right: 8px;
          }
        }
      }
      .right {
        display: flex;
        .img {
          height: 165rpx;
          width: 225rpx;
          border-radius: 6rpx;
        }
      }
    }
    .item-vertical {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 82px;
      .top {
        .title {
          color: $xboot-text-color;
          font-size: 18px;
          line-height: 26px;
        }
      }
      .middle {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        .img {
          height: 165rpx;
          width: 225rpx;
          border-radius: 6rpx;
        }
      }
      .bottom {
        font-size: 13px;
        color: $xboot-text-color-grey;
        .r {
          margin-right: 8px;
        }
      }
    }
    .item-vertical-big {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 82px;
      .top {
        .title {
          color: $xboot-text-color;
          font-size: 18px;
          line-height: 26px;
        }
      }
      .middle {
        position: relative;
        display: flex;
        padding: 10px 0;
        .play {
          position: absolute;
          top: calc(50% - 25px);
          left: calc(50% - 25px);
          width: 50px;
          height: 50px;
          z-index: 1;
        }
        .info {
          position: absolute;
          right: 6px;
          bottom: 14px;
          z-index: 1;
          font-size: 13px;
          color: #fff;
          .r {
            margin-right: 8px;
          }
        }
        .img {
          height: 380rpx;
          width: 100%;
          border-radius: 6rpx;
        }
      }
      .bottom {
        font-size: 13px;
        color: $xboot-text-color-grey;
        .r {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
